import React, { useRef, useEffect, useMemo } from 'react'
import { Modal, message } from 'antd'
import { awaitWrap, strToNum } from '@js/tool'
import { getRequest } from './ajax'
import DetailInfo from '@components/DetailInfo'

async function getHandle (id, formRef) {
  const c = formRef.current
  const h = message.loading('加载中')
  const [e, d] = await awaitWrap(getRequest(id))
  h()
  if (e === null && d !== null) {
    if (d.foreign_case_in) {
      d.foreign_case_in = strToNum(d.foreign_case_in)
    }
    if (d.province && d.city) {
      d.provinceCity = [d.province, d.city]
    }
    c.setFieldsValue(d)
  }
}

function Main ({ visible, data, structures, structureMap, hide = () => {}, refreshFn = () => {} }) {
  const formData = useMemo(() => {
    if (!data) {
      return []
    }
    const d = data
    const list = [
      { k: '届数', v: d.term },
      { k: '姓名', v: d.name },
      { k: '国家地区', v: d.country },
      { k: '地址', v: d.address },
      { k: '所在单位', v: d.structure },
      { k: '单位职务', v: d.structure_post },
      { k: '职业分类', v: d.occupation },
      { k: '学历', v: d.educational },
      { k: '性别', v: d.gender },
      { k: '是否擅长涉外案件', v: d.foreign_case_in === 1 ? '是' : '否' }
    ]
    if (d.country === '中国') {
      list.splice(3, 0, { k: '省市', v: typeof d.provinceCity === 'object' && d.provinceCity.length > 0 ? d.provinceCity.join(' ') : '' })
      list.splice(4, 0, { k: '民族', v: d.nation })
      list.splice(5, 0, { k: '政治面貌', v: d.political })
    }
    return list
  }, [data])
  const formRef = useRef(null)
  useEffect(() => {
    if (visible && data) {
      getHandle(data.id, formRef)
    }
  }, [visible, data])
  return (
    <Modal width={1000} open={visible} title='详情' onCancel={() => { hide() }} maskClosable={false}>
      <DetailInfo data={formData} />
    </Modal>
  )
}

export default Main
